<template>
  <div>
    <Row>
      {{ squareDetail.userName }}
      <Button @click="requestVisiavle=true">加为好友</Button>
    </Row>
    <Row>
      {{ squareDetail.squareDate }}
    </Row>
    <Row>
      {{ squareDetail.content }}
    </Row>
    <div>
      <Row>
        <Col v-if="stared" @click="cancelStar">
          <Icon type="md-heart" size="20"/>
        </Col>
        <Col v-else @click="star">
          <Icon type="md-heart-outline" size="20"/>
        </Col>
        <Col>
          {{squareDetail.starNum}}
        </Col>
      </Row>

    </div>
    <Row v-for="item in squareDetail.commentList" v-bind:key="item.commentId">
      <div @click="comment(item.commentId,item.userName,item.userId)">
        <div v-if="item.commentName===''">
          <Row>
            <Col style="color: #2d8cf0">{{item.userName}}</Col>
            :{{item.content}}
          </Row>
        </div>
        <div v-else>
          <Row>
            <Col style="color: #2d8cf0">{{item.userName}}</Col>
            回复
            <Col style="color: #2d8cf0">{{item.commentName}}</Col>
            :{{item.content}}
          </Row>
        </div>
      </div>
    </Row>
  </div>
  <Drawer :title="vueCommentName" placement="bottom" :closable="false" v-model="commentVisiable">
    <Form>
      <Input v-model="commentContent" type="textarea" :rows="4" placeholder="评论"/>
      <Button @click="postComment">发送</Button>
    </Form>
  </Drawer>
  <Drawer title="添加好友" placement="bottom" :closable="false" v-model="requestVisiavle">
    <Form>
      <Input v-model="requestContent" type="textarea" :rows="2" placeholder="申请内容"/>
      <Button @click="request">发送</Button>
    </Form>
  </Drawer>
</template>

<script>
import axios from 'axios'

export default {
  name: 'SquareDetail',
  data() {
    return {
      stared: false,
      squareId: this.$route.params.squareId,
      commentVisiable: false,
      requestVisiavle: false,
      commentContent: '',
      requestContent: '',
      commentName: '',
      vueCommentName: 'SS',
      commentId: '',
      squareDetail: {}
    }
  },
  created() {
    const self = this
    console.log(this.squareId)
    axios({
      method: 'get',
      url: `/square/detail/${this.squareId}`
    }).then((result) => {
      console.log(result)
      self.squareDetail = result.data
    })
  },
  methods: {
    comment(commentId, userName, userId) {
      console.log(commentId)
      this.commentName = userName
      this.vueCommentName = `回复${userName}:`
      this.commentVisiable = true
      this.commentId = commentId
      this.targetUserId = userId
    },
    postComment() {
      const self = this
      const comment = {
        ringId: this.squareDetail.squareId,
        targetUserId: this.targetUserId,
        targetCommentId: this.commentId,
        content: this.commentContent
      }
      const vueComment = {
        commentName: this.commentName,
        userName: 'ss',
        content: this.commentContent
      }
      axios({
        method: 'post',
        url: '/square/comment',
        data: comment
      }).then((result) => {
        console.log(result)
        self.$Notice.success({
          title: '评论成功'
        })
      })
      this.squareDetail.commentList.push(vueComment)
      this.commentContent = ''
      this.commentVisiable = false
    },
    cancelStar() {
      this.stared = false
      this.squareDetail.starNum--
      axios({
        method: 'post',
        url: `/square/stars/${this.squareId}`
      }).then((result) => {
        console.log(result)
      })
    },
    star() {
      this.stared = true
      this.squareDetail.starNum++
      axios({
        method: 'delete',
        url: `/square/stars/${this.squareId}`
      }).then((result) => {
        console.log(result)
      })
    },
    request() {
      const self = this
      this.requestVisiavle = false
      axios({
        method: 'post',
        url: '/request',
        data: {
          targetId: this.squareDetail.userId,
          content: this.requestContent
        }
      }).then((result) => {
        console.log(result)
        self.$Notice.success({
          title: '已发送请求'
        })
      })
      this.requestContent = ''
    }
  }

}
</script>

<style scoped>

</style>
